import React from 'react';
import Modal from '../../Modal';
import MarkdownRenderer from '../../MarkdownRenderer';
import { NATIVE_FUNCTIONS_DOCUMENTATION } from '../../../services/gameSaveService';

interface HelpModalProps {
    isOpen: boolean;
    onClose: () => void;
    content: { title: string; content: any };
}

const HelpModal: React.FC<HelpModalProps> = ({ isOpen, onClose, content }) => {
    return (
        <Modal isOpen={isOpen} onClose={onClose} title={content.title}>
            {content.title === '原生函数文档' ? (
                <div className="space-y-4">
                    {(content.content as typeof NATIVE_FUNCTIONS_DOCUMENTATION).map(func => (
                        <div key={func.name} className="p-3 bg-gray-900/50 rounded-lg">
                            <h4 className="font-semibold text-cyan-400 text-base font-mono">{func.name}</h4>
                            <p className="text-sm text-gray-300 mt-1">{func.description}</p>
                            <div className="mt-2">
                                <h5 className="text-xs font-bold text-gray-400">参数:</h5>
                                <ul className="list-disc list-inside text-sm text-gray-300 space-y-1 pl-2">
                                    {func.parameters.map(p => <li key={p.name}><code className="bg-gray-700 text-pink-400 px-1 py-0.5 rounded text-xs">{p.name}</code>: {p.description}</li>)}
                                </ul>
                            </div>
                            <div className="mt-2">
                                <h5 className="text-xs font-bold text-gray-400">返回:</h5>
                                <p className="text-sm text-gray-300">{func.returns.join(', ')}</p>
                            </div>
                            <div className="mt-2">
                                <h5 className="text-xs font-bold text-gray-400">输出模板示例:</h5>
                                <p className="text-sm text-gray-300 bg-gray-700 p-2 rounded mt-1"><code className="text-amber-300">{func.exampleTemplate}</code></p>
                            </div>
                        </div>
                    ))}
                </div>
            ) : (
                <MarkdownRenderer content={content.content} />
            )}
        </Modal>
    );
};

export default HelpModal;
